<div class="ad-config">
    <div class="tabs-wrap clearfix">
        <ul class="tabs">
            <li ng-repeat="tabItem in tab track by $index" ng-class="{'active' : tabSelectId == tabItem.id}" ng-click="tabClick(tabItem.id)"><a>{{tabItem.name}}</a></li>
        </ul>
    </div>

    <form name="upimg1" form-validate class="upimg1 mt-20" ng-if="tabSelectId === 'banner'">
        <ul class="clearfix">
            <li class="mb-10" ng-repeat="item in configData.banner">
                <p class="sizeTips">图片尺寸：750X330</p>
                <a class="del" href="javascript:;" ng-click="delete('banner',$index)">X</a>
                <a href="javascript:;" ngf-select="upload($file,'banner',$index)" ngf-select ng-model="file" name="file1" ngf-pattern="'image/*'"
                   ngf-accept="'image/*'" ngf-max-size="20MB" ngf-min-height="100">
                    <img ng-src="{{item.image}}">
                </a>
                <div class="mt-10">
                    <select class="select w-100px" ng-model="item.hrefType" ng-options="hrefTypeItem.id as hrefTypeItem.name for hrefTypeItem in selectHrefType">
                        <option value="" selected>请选择</option>
                    </select>
                    <input class="p-5 w-200px" placeholder="{{!item.hrefType ? '请输入商品id' : '请输入链接地址'}}" ng-model="item.link" name="link" validate='{"required" : "请输入商品id或地址"}' required>
                </div>
            </li>
            <li class="addAd mt-10" ng-if="configData.banner.length != configMaxLength.bannerMax" ng-click="add('banner')">
                <i class="iconfont icon-jia"></i>
            </li>
        </ul>
        <div class="mt-20 ta-c">
            <button class="btn" form-submit="bannerSubmit()">保存</button>
        </div>
    </form>

    <form name="upimg2" form-validate  class="upimg2 mt-20" ng-if="tabSelectId === 'middle'">
        <ul class="clearfix">
            <li class="f-l pos-r" style="width:330px;">
                <div class="img" ngf-select="upload($file,'middle',0)" ngf-select ng-model="file" name="file1" ngf-pattern="'image/*'"
                     ngf-accept="'image/*'" ngf-max-size="20MB">
                    <img ng-src="{{configData.middle[0].image}}">
                </div>
                <div class="mt-10">
                    <select class="select w-100px" ng-model="configData.middle[0].hrefType" ng-options="hrefTypeItem.id as hrefTypeItem.name for hrefTypeItem in selectHrefType">
                        <option value="" selected>请选择</option>
                    </select>
                    <input class="p-5 w-300px" placeholder="{{!configData.middle[0].hrefType ? '请输入商品id' : '请输入链接地址'}}" ng-model="configData.middle[0].link" name="link" validate='{"required" : "请输入商品id或地址"}' required>
                </div>
                <p class="sizeTips">图片尺寸：330X420</p>
            </li>
            <li class="f-l ml-5" style="width : 525px;">
                <div class="pos-r">
                    <div ngf-select="upload($file,'middle',1)" ngf-select ng-model="file" name="file1" ngf-pattern="'image/*'"
                         ngf-accept="'image/*'" ngf-max-size="20MB">
                        <img ng-src="{{configData.middle[1].image}}">
                    </div>
                    <div class="mt-10">
                        <select class="select w-100px" ng-model="configData.middle[1].hrefType" ng-options="hrefTypeItem.id as hrefTypeItem.name for hrefTypeItem in selectHrefType">
                            <option value="" selected>请选择</option>
                        </select>
                        <input class="p-5 w-400px" placeholder="{{!configData.middle[1].hrefType ? '请输入商品id' : '请输入链接地址'}}" ng-model="configData.middle[1].link" name="link1" validate='{"required" : "请输入商品id或地址"}' required>
                    </div>
                    <p class="sizeTips">图片尺寸：420X210</p>
                </div>

                <div class="clearfix mt-10" style="height: 160px;">
                    <div class="w-50 f-l pos-r">
                        <p class="sizeTips">图片尺寸：210X210</p>
                        <div ngf-select="upload($file,'middle',2)" ngf-select ng-model="file" name="file1" ngf-pattern="'image/*'"
                             ngf-accept="'image/*'" ngf-max-size="20MB">
                            <img ng-src="{{configData.middle[2].image}}">
                        </div>
                        <div class="mt-10">
                            <select class="select w-100px" ng-model="configData.middle[2].hrefType" ng-options="hrefTypeItem.id as hrefTypeItem.name for hrefTypeItem in selectHrefType">
                                <option value="" selected>请选择</option>
                            </select>
                            <input class="p-5 w-150px" placeholder="{{!configData.middle[2].hrefType ? '请输入商品id' : '请输入链接地址'}}" ng-model="configData.middle[2].link" name="link2" validate='{"required" : "请输入商品id或地址"}' required>
                        </div>
                    </div>
                    <div class="w-50 f-l pos-r">
                        <p class="sizeTips">图片尺寸：210X210</p>
                        <div ngf-select="upload($file,'middle',3)" ngf-select ng-model="file" name="file1" ngf-pattern="'image/*'"
                             ngf-accept="'image/*'" ngf-max-size="20MB">
                            <img ng-src="{{configData.middle[3].image}}">
                        </div>
                        <div class="mt-10">
                            <select class="select w-100px" ng-model="configData.middle[3].hrefType" ng-options="hrefTypeItem.id as hrefTypeItem.name for hrefTypeItem in selectHrefType">
                                <option value="" selected>请选择</option>
                            </select>
                            <input class="p-5 w-150px" placeholder="{{!configData.middle[3].hrefType ? '请输入商品id' : '请输入链接地址'}}" ng-model="configData.middle[3].link" name="link3" validate='{"required" : "请输入商品id或地址"}' required>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <div class="mt-20 ta-c">
            <button class="btn" form-submit="middleSubmit()">保存</button>
        </div>
    </form>

    <form name="upimg3" form-validate class="upimg1 mt-20" ng-if="tabSelectId === 'sales'">
        <ul class="clearfix">
            <li ng-repeat="item in configData.sales">
                <p class="sizeTips">图片尺寸：750X300</p>
                <a class="del" href="javascript:;" ng-click="delete('sales',$index)">X</a>
                <a href="javascript:;" ngf-select="upload($file,'sales',$index)" ngf-select ng-model="file" name="file1" ngf-pattern="'image/*'"
                   ngf-accept="'image/*'" ngf-max-size="20MB">
                    <img ng-src="{{item.image}}">
                </a>
                <div class="mt-10">
                    <select class="select w-100px" ng-model="item.hrefType" ng-options="hrefTypeItem.id as hrefTypeItem.name for hrefTypeItem in selectHrefType">
                        <option value="" selected>请选择</option>
                    </select>
                    <input class="p-5 w-200px" placeholder="{{!item.hrefType ? '请输入商品id' : '请输入链接地址'}}" ng-model="item.link" name="link" validate='{"required" : "请输入商品id或地址"}' required>
                </div>
            </li>
            <li class="addAd mt-10" ng-if="configData.sales.length != configMaxLength.saleseMax" ng-click="add('sales')">
                <i class="iconfont icon-jia"></i>
            </li>        </ul>
        <div class="mt-20 ta-c">
            <button class="btn" form-submit="salesSubmit()">保存</button>
        </div>
    </form>
</div>
<style>
    .upimg1 li{
        float: left;
        width: 320px;
        margin-right: 20px;
        position: relative;
    }
    .upimg1 li.addAd{ text-align: center;
        line-height:130px; font-size: 30px; border: 3px dashed #aaa; width: 320px; height: 140px; background-color: #fff; cursor: pointer;}
    .upimg1 p.sizeTips,
    .upimg2 p.sizeTips{
        width: 100%;
        height:32px;
        line-height:32px;
        color: #fff;
        font-size: 14px;
        background-color: rgba(0,0,0,0.5);
        position: absolute;
        left: 0;
        bottom: 40px;
        text-align: center;
    }
    .upimg1 a.del{position: absolute; top: 0; right: 0; display: block; width: 30px; height: 30px; background-color: rgba(0,0,0,0.5);
    text-align: center;font-size: 18px; line-height: 30px;
    color: #fff;
    }
    .upimg1 li a{
        display: block;
        height: 140px;
        overflow: hidden;
    }
    .upimg1 li:last-child{
        margin-right: 0;
    }
    .upimg2{
        /*width: 580px;*/
    }
    .upimg2 ul{
        overflow: hidden;
    }
    .ad-config img{
        max-width: 100%;
    }
</style>